<?php
$this->load->view('header');
?>

<h1>Simple Effects Demos</h1>
<hr />
<p><strong>visual_effect</strong> - Animation.</p>
<div id='animatefade' style="height:100px ; width : 200px; background-color : #ff0000; display: block;">
<?=$this->pquery->link_to_function('Click to make height = 50',$this->pquery->visual_effect('animate','#animatefade',array('height'=>'50')));?><br />
<?=$this->pquery->link_to_function('Click to make height = 100',$this->pquery->visual_effect('animate','#animatefade',array('height'=>'100')));?>
</div>

<hr />
<p><strong>visual_effect</strong> - Hide  / Show.</p>
<?=$this->pquery->link_to_function('hide',$this->pquery->visual_effect('hide','#hideshow'));?>&nbsp;&nbsp;
<?=$this->pquery->link_to_function('show',$this->pquery->visual_effect('show','#hideshow'));?>
<div id='hideshow'>
<div style="width : 200px; background-color : #ff0000; display: block; " >
<br />
<br />
<br />
<br />
</div>
</div>

<hr />
<p><strong>visual_effect</strong> - fadeIn / fadeOut.</p>
<?=$this->pquery->link_to_function('fadeOut',$this->pquery->visual_effect('fadeOut','#fade'));?>&nbsp;&nbsp;
<?=$this->pquery->link_to_function('fadeIn',$this->pquery->visual_effect('fadeIn','#fade'));?>


<div id='fade'>
<div style="width : 200px; background-color : #ff0000; display: block; " >
<br />
<br />
<br />
<br />
</div>
</div>

<hr />
<p><strong>visual_effect</strong> - slideToggle with callback.</p>
<?=$this->pquery->link_to_function('slidetoggle',$this->pquery->visual_effect('slideToggle','#toggle',array('callback'=>'alert("Callback");')));?>
<div id='toggle' style=" width : 200px; background-color : #ff0000; ">
<br />
<br />
<br />
<br />
</div>
<?php
$this->load->view('footer');
?>